import React from 'react';

import '../../style/itemMsg.less'


class ItemMsgSelf extends React.Component {
    constructor(props){
        super(props)

    }

    formatEmoji(content){
        let str2 = content.replace(/\[em:(\d+)\]/g, function(item, index){
            let url="https://demo.popoim.cn/static/h5/img/emotion/face01/"+index+".png";
            // return arr[index-1];
            return "<img src="+url+" style='width:1.5rem'  alt="+item+"/>"

        });
        return str2;
    }
    render() {

        return (
            <div className=" ItemMsgSelf">
                <div className="right">
                    <div className="name">{this.props.msg.name}</div>
                    <div className="msgArea">
                       <span className="msgWarp" dangerouslySetInnerHTML={{__html: this.formatEmoji(this.props.msg.content)}} />
                    </div>
                </div>
                <div className="left">
                    <img className="avatar"
                         src={this.props.msg.avatar}/>
                </div>
            </div>
        )
    }
}

export default ItemMsgSelf
